/**
 * Element Plus 主题增强样式
 * 基于南昌旅游特色，提供更现代化的 UI 体验
 */

/* ========== 全局主题变量覆盖 ========== */
:root {
  --el-color-primary: #C8102E;
  --el-color-primary-light-3: #E63946;
  --el-color-primary-light-5: #F5A5B0;
  --el-color-primary-light-7: #FAD5DB;
  --el-color-primary-light-8: #FCE8EB;
  --el-color-primary-light-9: #FEF4F5;
  --el-color-primary-dark-2: #A01D2A;
  
  --el-color-success: #4CAF50;
  --el-color-warning: #D4AF37;
  --el-color-danger: #E63946;
  --el-color-info: #1E88E5;
  
  --el-border-radius-base: 8px;
  --el-border-radius-small: 6px;
  --el-border-radius-large: 12px;
  
  --el-font-size-base: 14px;
  --el-font-size-small: 13px;
  --el-font-size-large: 16px;
  
  --el-transition-duration: 0.3s;
  --el-transition-duration-fast: 0.2s;
}

/* ========== 按钮增强 ========== */
.el-button {
  border-radius: var(--el-border-radius-base);
  font-weight: 500;
  transition: all var(--el-transition-duration) ease;
  position: relative;
  overflow: hidden;
}

.el-button--primary {
  background: var(--gradient-primary, linear-gradient(135deg, #C8102E 0%, #D4AF37 100%));
  border: none;
  color: white;
  box-shadow: 0 2px 8px rgba(200, 16, 46, 0.2);
}

.el-button--primary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.el-button--primary:hover::before {
  width: 300px;
  height: 300px;
}

.el-button--primary:hover {
  background: var(--gradient-primary-reverse, linear-gradient(135deg, #D4AF37 0%, #C8102E 100%));
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
  transform: translateY(-2px);
}

.el-button--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(200, 16, 46, 0.2);
}

.el-button--success {
  background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
  border: none;
  color: white;
}

.el-button--warning {
  background: linear-gradient(135deg, #D4AF37 0%, #F4D03F 100%);
  border: none;
  color: white;
}

.el-button--danger {
  background: linear-gradient(135deg, #E63946 0%, #F5A5B0 100%);
  border: none;
  color: white;
}

.el-button--info {
  background: linear-gradient(135deg, #1E88E5 0%, #42A5F5 100%);
  border: none;
  color: white;
}

/* ========== 卡片增强 ========== */
.el-card {
  border-radius: var(--el-border-radius-large);
  border: 1px solid rgba(200, 16, 46, 0.1);
  background: var(--gradient-card, linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(227,242,253,0.8) 100%));
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(200, 16, 46, 0.08);
  transition: all var(--el-transition-duration) ease;
  overflow: hidden;
}

.el-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity var(--el-transition-duration) ease;
}

.el-card:hover::before {
  opacity: 1;
}

.el-card:hover {
  box-shadow: 0 8px 24px rgba(200, 16, 46, 0.16);
  transform: translateY(-4px);
  border-color: rgba(212, 175, 55, 0.3);
}

.el-card__header {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(200, 16, 46, 0.1);
  background: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  color: var(--text-primary, #303133);
}

.el-card__body {
  padding: 20px;
}

/* ========== 输入框增强 ========== */
.el-input__wrapper {
  border-radius: var(--el-border-radius-base);
  transition: all var(--el-transition-duration) ease;
  box-shadow: 0 0 0 1px var(--border-color, #DCDFE6) inset;
}

.el-input__wrapper:hover {
  box-shadow: 0 0 0 1px rgba(200, 16, 46, 0.3) inset;
}

.el-input.is-focus .el-input__wrapper {
  box-shadow: 0 0 0 2px rgba(200, 16, 46, 0.2) inset;
}

.el-input__inner {
  transition: all var(--el-transition-duration) ease;
}

.el-input__inner:focus {
  color: var(--text-primary, #303133);
}

/* ========== 选择器增强 ========== */
.el-select .el-input.is-focus .el-input__wrapper {
  box-shadow: 0 0 0 2px rgba(200, 16, 46, 0.2) inset;
}

.el-select-dropdown {
  border-radius: var(--el-border-radius-base);
  box-shadow: 0 4px 20px rgba(200, 16, 46, 0.15);
  border: 1px solid rgba(200, 16, 46, 0.1);
}

.el-select-dropdown__item {
  transition: all var(--el-transition-duration-fast) ease;
}

.el-select-dropdown__item:hover {
  background: rgba(200, 16, 46, 0.1);
  color: var(--el-color-primary);
}

.el-select-dropdown__item.selected {
  background: rgba(200, 16, 46, 0.15);
  color: var(--el-color-primary);
  font-weight: 500;
}

/* ========== 表格增强 ========== */
.el-table {
  border-radius: var(--el-border-radius-base);
  overflow: hidden;
  border: 1px solid rgba(200, 16, 46, 0.1);
}

.el-table th.el-table__cell {
  background: linear-gradient(135deg, rgba(200, 16, 46, 0.05) 0%, rgba(212, 175, 55, 0.05) 100%);
  color: var(--text-primary, #303133);
  font-weight: 600;
  border-bottom: 2px solid rgba(200, 16, 46, 0.2);
}

.el-table td.el-table__cell {
  border-bottom: 1px solid rgba(200, 16, 46, 0.05);
  transition: background-color var(--el-transition-duration-fast) ease;
}

.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: rgba(227, 242, 253, 0.3);
}

.el-table__body tr:hover > td.el-table__cell {
  background-color: rgba(200, 16, 46, 0.05);
}

/* ========== 对话框增强 ========== */
.el-dialog {
  border-radius: var(--el-border-radius-large);
  border: 1px solid rgba(200, 16, 46, 0.1);
  box-shadow: 0 8px 32px rgba(200, 16, 46, 0.15);
  overflow: hidden;
}

.el-dialog__header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(200, 16, 46, 0.1);
  background: linear-gradient(135deg, rgba(200, 16, 46, 0.05) 0%, rgba(212, 175, 55, 0.05) 100%);
}

.el-dialog__title {
  font-weight: 600;
  color: var(--text-primary, #303133);
  font-size: 18px;
}

.el-dialog__body {
  padding: 24px;
}

.el-dialog__footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(200, 16, 46, 0.1);
  background: rgba(245, 247, 250, 0.5);
}

/* ========== 消息提示增强 ========== */
.el-message {
  border-radius: var(--el-border-radius-base);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  min-width: 300px;
}

.el-message--success {
  background: rgba(76, 175, 80, 0.95);
  border-color: #4CAF50;
  color: white;
}

.el-message--error {
  background: rgba(200, 16, 46, 0.95);
  border-color: #C8102E;
  color: white;
}

.el-message--warning {
  background: rgba(212, 175, 55, 0.95);
  border-color: #D4AF37;
  color: white;
}

.el-message--info {
  background: rgba(30, 136, 229, 0.95);
  border-color: #1E88E5;
  color: white;
}

/* ========== 加载状态增强 ========== */
.el-loading-mask {
  background-color: rgba(227, 242, 253, 0.9);
  backdrop-filter: blur(4px);
}

.el-loading-spinner {
  color: var(--el-color-primary);
}

/* ========== 分页增强 ========== */
.el-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.el-pagination .el-pager li {
  border-radius: var(--el-border-radius-small);
  transition: all var(--el-transition-duration-fast) ease;
  min-width: 36px;
  height: 36px;
  line-height: 36px;
}

.el-pagination .el-pager li:hover {
  background: rgba(200, 16, 46, 0.1);
  color: var(--el-color-primary);
}

.el-pagination .el-pager li.is-active {
  background: var(--gradient-primary);
  color: white;
  box-shadow: 0 2px 8px rgba(200, 16, 46, 0.3);
}

.el-pagination .btn-next:hover,
.el-pagination .btn-prev:hover {
  color: var(--el-color-primary);
}

/* ========== 标签页增强 ========== */
.el-tabs__header {
  margin-bottom: 20px;
}

.el-tabs__item {
  font-weight: 500;
  transition: all var(--el-transition-duration-fast) ease;
  padding: 0 20px;
}

.el-tabs__item:hover {
  color: var(--el-color-primary);
}

.el-tabs__item.is-active {
  color: var(--el-color-primary);
  font-weight: 600;
}

.el-tabs__active-bar {
  background: var(--gradient-primary);
  height: 3px;
}

/* ========== 步骤条增强 ========== */
.el-steps {
  padding: 20px 0;
}

.el-steps .el-step__head.is-process {
  color: var(--el-color-primary);
  border-color: var(--el-color-primary);
}

.el-steps .el-step__head.is-finish {
  color: var(--el-color-warning);
  border-color: var(--el-color-warning);
}

.el-steps .el-step__title.is-process {
  color: var(--el-color-primary);
  font-weight: 600;
}

.el-steps .el-step__title.is-finish {
  color: var(--el-color-warning);
}

/* ========== 标签增强 ========== */
.el-tag {
  border-radius: var(--el-border-radius-small);
  padding: 4px 12px;
  font-weight: 500;
  border: none;
}

.el-tag--primary {
  background: rgba(200, 16, 46, 0.1);
  color: var(--el-color-primary);
}

.el-tag--success {
  background: rgba(76, 175, 80, 0.1);
  color: var(--el-color-success);
}

.el-tag--warning {
  background: rgba(212, 175, 55, 0.1);
  color: var(--el-color-warning);
}

.el-tag--danger {
  background: rgba(230, 57, 70, 0.1);
  color: var(--el-color-danger);
}

.el-tag--info {
  background: rgba(30, 136, 229, 0.1);
  color: var(--el-color-info);
}

/* ========== 表单增强 ========== */
.el-form-item__label {
  font-weight: 500;
  color: var(--text-primary, #303133);
}

.el-form-item.is-error .el-input__wrapper {
  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
}

.el-form-item__error {
  color: var(--el-color-danger);
  font-size: 12px;
}

/* ========== 菜单增强 ========== */
.el-menu {
  border-right: none;
}

.el-menu-item {
  border-radius: var(--el-border-radius-base);
  margin: 4px 8px;
  transition: all var(--el-transition-duration-fast) ease;
}

.el-menu-item:hover {
  background: rgba(200, 16, 46, 0.1);
  color: var(--el-color-primary);
}

.el-menu-item.is-active {
  background: var(--gradient-primary);
  color: white;
  box-shadow: 0 2px 8px rgba(200, 16, 46, 0.3);
}

/* ========== 响应式优化 ========== */
@media (max-width: 768px) {
  .el-card {
    border-radius: var(--el-border-radius-base);
  }
  
  .el-button {
    font-size: 14px;
    padding: 10px 16px;
  }
  
  .el-dialog {
    width: 95% !important;
    margin: 5vh auto !important;
  }
  
  .el-table {
    font-size: 13px;
  }
}


